<template>
  <el-card>
    <!-- 头部按钮 -->
    <el-row type="flex" justify="space-between">
      <h3>{{formData.id?'修改试题':'新增试题'}}</h3>
      <el-button type="primary" plain @click="goBack">返回列表</el-button>
    </el-row>
    <!-- 表单区域 -->
    <el-row align="center">
      <el-form ref="form" :model="formData" label-width="200px" :inline="true" :rules="rules">
        <!-- 学科方向 -->
        <el-form-item label="学科方向" prop="subject_id">
          <el-select v-model="formData.subject_id" placeholder="请选择学科" @focus="getSubjectTree">
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.name"
              :value="item.id*1"
            />
          </el-select>
        </el-form-item>
        <!-- 目录信息 -->
        <el-form-item label="目录信息" prop="directory_id">
          <el-select v-model="formData.directory_id" placeholder="请选择目录" @focus="getdirectoryList">
            <el-option
              v-for="item in menuList"
              :key="item.id"
              :label="item.name"
              :value="item.id*1"
            />
          </el-select>
        </el-form-item>
        <!-- 标签名称 -->
        <el-form-item label="技能标签" prop="tag_id">
          <el-select
            v-model="formData.tag_id"
            multiple
            placeholder="请选择标签名称"
            @focus="getTagList"
            @click="getTagList"
          >
            <el-option v-for="item in tagList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <!-- 试题难度 -->
        <el-form-item label="试题难度" prop="difficulty">
          <el-radio v-model="formData.difficulty" :label="1">简单</el-radio>
          <el-radio v-model="formData.difficulty" :label="2">中等</el-radio>
          <el-radio v-model="formData.difficulty" :label="3">较难</el-radio>
        </el-form-item>
        <el-form-item label="试题类型" prop="quest_type">
          <el-select v-model="formData.quest_type" placeholder="请选择题型">
            <el-option label="单选题" :value="1"></el-option>
            <el-option label="多选题" :value="2"></el-option>
            <el-option label="判断题" :value="3"></el-option>
            <el-option label="简答题" :value="4"></el-option>
          </el-select>
        </el-form-item>

        <!-- 是否面试真题 -->
        <el-form-item label="是否面试真题" prop="is_true_question">
          <el-radio v-model="formData.is_true_question" :label="1">是</el-radio>
          <el-radio v-model="formData.is_true_question" :label="2">否</el-radio>
        </el-form-item>
        <el-form-item label="题干信息:" prop="question">
          <wangEditor v-model="formData.question" />
        </el-form-item>
        <!-- 试题答案-->
        <el-form-item label="试题答案" prop="quest_answer">
          <div v-if="type === 0">请选择试题类型，生成答案模板</div>
          <!-- 判断题 -->
          <JudgeQuestion @judge="getQuest_options" v-if="type===3" />
          <!-- 多选题 -->
          <MoreChoose @moreChoose="getQuest_options" v-if="type===2" />
          <!-- 单选题 -->
          <OneChoose @quest_options="getQuest_options" v-if="type===1" />
          <wangEditor v-model="formData.quest_answer" v-if="type===4" />
        </el-form-item>
        <el-form-item label="答案解析:" prop="quest_remark">
          <wangEditor v-model="formData.quest_remark" />
          <br />
          <el-button type="primary" @click="btnOK">提交</el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </el-card>
</template>

<script>
import WangEditor from "/src/components/wangEditor";
import {
  getTreeListApi,
  PostquestionrApi,
  StatequestionApi
} from "@/api/exam/question";
import JudgeQuestion from "./judgeQuestion";
import MoreChoose from "./moreChoose";
import OneChoose from "./oneChoose";
export default {
  name: "AddQuestion",

  components: {
    JudgeQuestion,
    MoreChoose,
    WangEditor,
    OneChoose
  },
  props: {},
  data() {
    return {
      type: 0, //类型默认为0
      content: "<h1></h1>",
      tableData: [],
      subjectList: [], //学科信息
      tagList: [], //标签列表
      menuList: [], //目录
      formData: {
        subject_id: "",
        directory_id: "",
        tag_id: [],
        difficulty: 1,
        quest_type: "",
        is_true_question: 1,
        question: "",
        quest_answer: "",
        quest_remark: "",
        quest_options: []
      },
      rules: {
        subject_id: [{ required: true, message: "请选择", trigger: "blur" }],
        directory_id: [{ required: true, message: "请选择", trigger: "blur" }],
        tag_id: [{ required: true, message: "请选择", trigger: "blur" }],
        difficulty: [{ required: true, message: "请选择", trigger: "blur" }],
        quest_type: [{ required: true, message: "请选择", trigger: "blur" }],
        is_true_question: [
          { required: true, message: "请选择", trigger: "blur" }
        ],
        question: [{ required: true, message: "请选择", trigger: "blur" }],
        quest_options: [{ required: true, message: "必须!", trigger: "blur" }],
        quest_remark: [{ required: true, message: "必须!", trigger: "blur" }],
        question: [{ required: true, message: "必须!", trigger: "blur" }]
      },
      id: ""
    };
  },
  computed: {},
  watch: {
    // 监听新旧组变化 控制答题卡的不同
    formData: {
      handler(val, old) {
        //如果没有改变则为0
        if (val.quest_type === old.quest_type) {
          this.type = 0;
        }
        if (val.quest_type === 4) {
          this.type = 4;
        }
        if (val.quest_type === 1) {
          this.type = 1;
        }
        if (val.quest_type === 2) {
          this.type = 2;
        }
        if (val.quest_type === 3) {
          this.type = 3;
        }
      },
      deep: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    goBack() {
      this.$emit("back");
    },
    async btnOK() {
      try {
        await this.$refs.form.validate();
      } catch (error) {
        console.log(error);
      }

      if (this.formData.id) {
        await StatequestionApi(this.formData);
      } else {
        if (this.type === 1) {
          await PostquestionrApi(this.formData);
        }
        if (this.type === 2) {
          await PostquestionrApi(this.formData);
        }
        if (this.type === 3) {
          await PostquestionrApi(this.formData);
        }
        if (this.type === 4) {
          await PostquestionrApi(this.formData);
        }
      }
      this.$message.success("添加成功");
      this.goBack();
      this.$emit(updatedList);
    },

    getQuest_options(quest_options, quest_answer) {
      this.formData.quest_options = quest_options;
      console.log(quest_options);
      this.formData.quest_answer = quest_answer;
    },
    //学科
    async getSubjectTree() {
      this.subjectList = await getTreeListApi();
    },
    // 目录列表
    getdirectoryList() {
      const arr = this.subjectList.filter(
        item => item.id === this.formData.subject_id
      );
      if (arr.length === 0) {
        this.menuList = [];
      } else {
        // console.log(arr);
        this.menuList = arr[0].children;
      }
      this.getTagList();
    },
    // 标签列表
    getTagList() {
      const arr = this.menuList.filter(
        item => item.id === this.formData.directory_id
      );
      if (arr.length === 0) {
        this.tagList = [];
      } else {
        // console.log(arr);
        this.tagList = arr[0].children;
      }
    },
    close() {
      this.goBack();
    }
  }
};
</script>
<style lang="less" scoped></style>
